import React, { Component, createRef } from 'react';
import { Card, Row, Col } from 'antd';
import echarts from 'echarts';
import './dashboard.less';
export default class DashBoard extends Component {
  constructor() {
    super();
    this.articleAmount = createRef();
    this.state = {
      colorList: []
    };
  }
  initArticleAmountChart() {
    this.articleAmountChart = echarts.init(this.articleAmount.current); //不用再article中声明也可以
    const option = {
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line',
          areaStyle: {}
        }
      ]
    };

    this.articleAmountChart.setOption(option);
  }
  componentDidMount() {
    const list = [];
    for (let i = 0; i < 4; i++) {
      list.push({
        background: '#' + Math.floor(Math.random() * 16777215).toString(16)
      });
    }
    this.setState({
      colorList: list
    });
    this.initArticleAmountChart();
  }
  render() {
    return (
      <>
        <Card title="概览">
          <Row gutter={16}>
            {/**写成单个数字的这样表示水平间隔 */}
            {this.state.colorList.map((color, index) => {
              return (
                <Col key={index} className="gutter-row" span={6}>
                  <div className="gutter-box" style={color}>
                    col
                  </div>
                </Col>
              );
            })}
          </Row>
        </Card>
        <Card title="概览">
          <div ref={this.articleAmount} style={{ height: '500px' }}></div>
        </Card>
      </>
    );
  }
}
